<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap-按钮组</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="btn-toolbar" role="toolbar">
        <div class="btn-group btn-group-xs">
            <button type="button" class="btn btn-primary">按钮1</button>
            <button type="button" class="btn btn-info">按钮2</button>
            <button type="button" class="btn btn-success">按钮3</button>
        </div>

        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-warning">按钮4</button>
            <button type="button" class="btn btn-danger">按钮5</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span> 按钮6</button>
            <ul class="dropdown-menu">
                <li>选项1</li>
                <li>选项2</li>
            </ul>
        </div>

        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-warning active">按钮7</button>
            <button type="button" class="btn btn-danger disabled">按钮8</button>
            <button type="button" class="btn btn-link">按钮9</button>
        </div>
    </div>

    <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">垂直按钮1</button>
        <button type="button" class="btn btn-primary">垂直按钮2</button>
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">垂直下拉按钮 <span class="caret"></span></button>
        <ul class="dropdown-menu" style="background-color: #ffffff">
            <li style="color: #ff0000;padding-left: 5px">选项1</li>
            <li style="color: #2e6da4;padding-left: 5px">选项2</li>
        </ul>
    </div>

    <div class="btn-group dropup">
        <button class="btn btn-primary">默认</button>
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">切换下拉菜单</span></button>
        <ul class="dropdown-menu">
            <li>功能1</li>
            <li>功能2</li>
        </ul>
    </div>
</div>



<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>